<template>
  <!-- 退租流程第三步 -->
  <div class="thirdStepPage">
    <CommonTitle :titleName="'租赁合同信息'">
      <template #rightCnBox>
        <div class="titleRight d-flex a-center">
            <div>
                租赁合同经办人: {{ baseForm.leaseManageUserName || '暂无' }} (
                {{ baseForm.leaseDepartmentName || '暂无'}} )
            </div>
            <el-button
                class="m-l10"
                @click="previewContract"
            >预览合同</el-button>
        </div>
      </template>
    </CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="130px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="项目名称:">
              <span class="itemContentBox">{{ baseForm.projectName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="资产名称:">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="资产地址:">
              <span class="itemContentBox">{{ baseForm.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="合同名称:">
              <span class="itemContentBox">{{ baseForm.contractName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="合同编号:">
              <span class="itemContentBox">{{ baseForm.contractId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="承租方(签约方):">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="租赁周期:">
              <span class="itemContentBox"
                >{{ baseForm.signStartTime }} 至
                {{ baseForm.signEndTime }}</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="承租面积:">
              <span class="itemContentBox">{{ baseForm.leaseTotalArea }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="房源明细:">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="租赁用途:">
              <span class="itemContentBox">{{ baseForm.businessPurpose }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="保证金:">
              <span class="itemContentBox">{{ baseForm.deposit }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="合同金额:">
              <span class="itemContentBox">{{
                baseForm.contractTotalPrice
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="已收总金额:">
              <span class="itemContentBox">{{
                baseForm.receivedTotalPrice
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <CommonTitle :titleName="'退租信息'">
      <template #rightCnBox>
        <div class="titleRight">
          退租经办人: {{ baseForm.rentOutManageUserName }} (
          {{ baseForm.rentOutDepartmentName }} )
        </div>
      </template>
    </CommonTitle>
    <el-table
      class="rentPlanTabel"
      :data="baseForm.leaseRentPlans"
      :header-row-style="{ background: '#F5F5F5' }"
      :header-cell-style="{
        background: 'none',
        padding: '12px 0',
      }"
      tooltip-effect="dark"
      border
      style="width: 100%; margin-bottom: 23px"
    >
      <el-table-column prop="numberOfPeriods" label="期数" align="center">
      </el-table-column>
      <el-table-column label="期间" width="200" align="center">
        <template #default="scope">
          {{ scope.row.payStartTime }} - {{ scope.row.payEndTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="numberOfPeriods"
        label="租赁面积"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="increaseRatio"
        label="递增"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rentUnitPrice"
        label="租金单价"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '1' ? 'receivableRent' : ''"
        label="月租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '2' ? 'receivableRent' : ''"
        label="季租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '3' ? 'receivableRent' : ''"
        label="半年租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '4' ? 'receivableRent' : ''"
        label="年租金"
        align="center"
      ></el-table-column>
      <el-table-column prop="payStatus" label="付款状态" align="center">
        <template #default="scope">
          {{ scope.row.payStatus > 0 ? "已缴纳" : "未缴纳" }}
        </template>
      </el-table-column>
    </el-table>

      <el-card class="m-b20" shadow="never">
          <el-form
                  :inline="true"
                  :model="baseForm"
                  class="demo-form-inline"
                  label-position="right"
                  label-width="130px"
          >
              <el-row>
                  <el-col :span="12">
                      <el-form-item style="width: 100%" label="应退金额:">
                          <span class="itemContentBox">{{ baseForm.refundableAmount + baseForm.returnRent }}</span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item style="width: 100%" label="承租方收款账号:">
            <span class="itemContentBox">{{
                baseForm.bankAccountNumber
                }}</span>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                      <el-form-item style="width: 100%" label="开户行:">
                          <span class="itemContentBox">{{ baseForm.bankName }}</span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item style="width: 100%" label="户名:">
            <span class="itemContentBox">{{
                baseForm.bankAccountName
                }}</span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item style="width: 100%" label="退租描述:">
            <span class="itemContentBox">{{
                baseForm.returnDesc || '暂无'
                }}</span>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
      </el-card>

    <CommonTitle :titleName="'附件'"></CommonTitle>
    <div class="fileVoList m-l20 m-b10" v-if="baseForm.fileVoList && baseForm.fileVoList.length!==0">
        <div class="fileItem" v-for="(item,index) in baseForm.fileVoList" :key="index" @click="onDownload(item)">
            <span class="fileItem-font">{{item.fileName}}</span>
        </div>
    </div>
    <el-empty v-else description="暂无数据"/>

    <div class="btnBox m-t10">
      <el-button
        color="#FF7B50"
        style="color: #fff"
        type="primary"
        @click="backPrev"
        >返回上一步</el-button
      >
      <el-button
        color="#FF7B50"
        style="color: #fff"
        type="primary"
        :disabled="subDisFlag"
        @click="doSubmit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElRow,
  ElCol,
  ElEmpty,
  ElMessage,
    ElCard
} from "element-plus";
import {downloadImage, localGet, localRemove} from "@/common/utils/GlobalUtils";
import CommonTitle from "@/components/CommonTitle.vue";
import { thorwLeaseApi } from "@/api/coordination";
import { useRouter } from "vue-router";
import { downloadFile } from "@/common/utils/GlobalUtils";
import {clearCache} from "@/utils/createRoutes";


const router = useRouter();
const getRentOutId = ref(null);
const subDisFlag = ref(false);
const baseForm = reactive({
  projectName: "--",
  contractName: "--",
  contractId: "--",
  businessPurpose: "--",
  signStartTime: "--",
  signEndTime: "--",
  assetsName: "--",
  leaseTotalArea: "--",
  address: "--",
  leaseHousings: [], // 房源明细
  leaseManageUserName: "--", // 租赁合同经办人
  leaseDepartmentName: "--", // 租赁部门
  leaseCustomers: [], // 租赁客户集合
  deposit: "--", // 保证金
  contractTotalPrice: "--",
  receivedTotalPrice: "--",
  leaseRentPlans: [], // 退租信息
  refundableAmount: "--", // 应退金额
  // bankVo: {

  // },
      bankAccountNumber: "--", // 收款账号
    bankName: "--", // 开户行
    bankAccountName: "--", // 户名
  rentOutManageUserName: "--", // 退租经办人
  rentOutDepartmentName: "--", // 退租部门
  payType: "", // 支付方式： 1-月；2-季；3-半年；4-年
});

// 初始获取会审信息
const initInfo = (id) => {
  thorwLeaseApi.getCheckupInfo(id).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data) {
        // Object.keys(baseForm).forEach((n) => {
        //   baseForm[n] = (data[n] !== null && data[n] !== '') ? data[n] : '--' ;
        // });
          for (let key in data){
              baseForm[key] = data[key];
          }
      }
    }
  });
};

// 定义向父组件传值方法
const emits = defineEmits(["nextStep"]);
const backPrev = () => {
  emits("nextStep", "GoEdit");
};

// 提交退租审核
const doSubmit = () => {
  subDisFlag.value = true
  let params = {
    rentOutId: getRentOutId.value, // 退租编号
  };
  thorwLeaseApi.saveCheckupInfo(params).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      ElMessage.success("提交审核成功");
      localRemove("ThrowLeaseFirstFormObj");
      setTimeout(() => {
        router.push({
          path: "/asset/collaborativeApproval/createThrowLease",
        });
        subDisFlag.value = false
        clearCache({title:'创建退租流程'});
      }, 1000);
    } else {
      subDisFlag.value = false
    }
  });
};

/**
 * 预览合同
 */
const previewContract = () => {
    if((baseForm.file && baseForm.file.fileUrlKey && baseForm.file.fileUrlKey!=='') || (baseForm.file && baseForm.file.fileUrlKey)){
        let fileUrlKey = baseForm.file.fileUrlKey.replaceAll("/","@")
        let types = baseForm.file.fileUrlKey.split('.');
        if(types[types.length-1]==='docx'){
            window.open(`/document/docx/${fileUrlKey}`);
        }
        if(types[types.length-1]==='pdf'){
            window.open(`/document/pdf/${fileUrlKey}`);
        }
    }
}

/**
 * 下载
 */
const onDownload = (item) => {
    let types = ['jpeg','png','gif','bmp','jpg']
    if(types.includes(item.fileName.split('.')[1])){ // 图片
      downloadImage(item.fileAddress,item.fileName);
    }
    if(!types.includes(item.fileName.split('.')[1])){ // 非图片
        downloadFile(item.fileAddress, item.fileName);
    }
}

onMounted(() => {
  getRentOutId.value = localGet("RentOutId");
  initInfo(getRentOutId.value);
});
</script>

<style lang="scss" scoped>
.fileVoList{
  .fileItem{
    .fileItem-font{
      color: #ff7b56;
      cursor: pointer;
    }
  }
}

.thirdStepPage {
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .docBox {
        .downLoadBtn {
          width: 77px;
          height: 32px;
          line-height: 30px;
          display: inline-block;
          background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
          border-radius: 4px;
          text-align: center;
          font-weight: 500;
          color: #ffffff;
          font-family: SourceHanSansMedium;
          cursor: pointer;
        }
      }
    }
  }
  .titleRight {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .btnBox {
    text-align: center;
  }
  .rentPlanTabel {
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          .cell {
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
